/*--------------------------------------------------
	[PLACEHOLDER]
----------------------------------------------------*/

@mixin placeholder($color: $input-color-placeholder) {
  &:-moz-placeholder            { color: $color; } // Firefox 4-18
  &::-moz-placeholder           { color: $color; } // Firefox 19+
  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}


/*--------------------------------------------------
	[BUTTON VARIANT]
----------------------------------------------------*/

@mixin button-variant($color, $color-hover, $background, $background-hover, $border-color, $border-hover, $font-size, $padding, $line-height, $border-radius) {
	display: inline-block;
	font-weight: 600;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: $color;
	padding: $padding;
	font-size: $font-size;
	background: $background;
	line-height: $line-height;
	border-radius: $border-radius;
	border: 2px solid $border-color !important;
	@include cubic-transition($delay: 0, $duration:100ms, $property: (all));

	&:focus,
	&:active:focus,
	&.active:focus {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: none;
        box-shadow: none;
	}
	&:hover,
	&:focus {
		text-decoration: none;
		color: $color-hover;
		background: $background-hover;
		border-color: $border-hover;
		@include cubic-transition($delay: 0, $duration:400ms, $property: (all));
	}
}


/*--------------------------------------------------
	[HEADING]
----------------------------------------------------*/

@mixin heading($title-color, $text-color, $border-color) {
	z-index: 1;
	position: relative;
	text-align: center;
	margin-bottom: 100px;

	&:after {
		left: 50%;
		height: 3px;
		width: 50px;
		content: " ";
		bottom: -50px;
		margin-left: -25px;
		position: absolute;
		background: $border-color;
	}

	h2 {
		font-size: 40px;
		font-weight: 500;
		margin: 0 0 20px;
		color: $title-color;
	}

	p {
		font-size: 16px;
		font-weight: 300;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: $text-color;
	}
}


/*--------------------------------------------------
	[HEADING LEFT]
----------------------------------------------------*/

@mixin heading-left($title-color, $text-color) {
	z-index: 1;
	margin-bottom: 30px;

	h2 {
		font-size: 30px;
		margin: 0 0 20px;
		color: $title-color;
		text-transform: capitalize;
	}

	p {
		color: $text-color;
		font-size: 16px;
		letter-spacing: 0.5px;
	}
}


/*--------------------------------------------------
	[TRANSITION]
----------------------------------------------------*/

/* Cubic Bezier Transition */
@mixin cubic-transition ($delay, $duration, $property) {
	transition: {
		duration: $duration;
		property: $property;
		timing-function: cubic-bezier(0.7, 1, 0.7, 1);
	} 
}

/* Opacity Transition */
@mixin transition ($transition-property, $transition-time) {
    -webkit-transition: $transition-property $transition-time;
    -moz-transition: $transition-property $transition-time;
    -ms-transition: $transition-property $transition-time;
    -o-transition: $transition-property $transition-time;
    transition: $transition-property $transition-time;
}

/* Translate 3D Transition */
@mixin translate3d($x, $y, $z) {
  	-webkit-transform: translate3d($x, $y, $z);
  	transform: translate3d($x, $y, $z);
}